<template>
<div>
<div class='main'>
  <div class='left'>
    <div class='left-container'>
      <div class='title'>第八章 这里是标题</div>
      <div class='description'>
        这里是题目描述
        说一下题目的事
      </div>
      <div class='content-container'>
        <div class='smalltitle'>学生答案：</div>
        <div class='doc-container'>
          <div class='doc'>这里放一个文件</div>
        </div>
      </div>
      <div class='content-container'>
        <div class='smalltitle' style="color:green">正确答案：</div>
        <div class='correct-answer-container'>
          <div class='correct-answer'>
            <div class='correct-answer-head'>
                <div>得分</div>
                <div class='mark-input-container'>
                  <el-input v-model="mark" placeholder="0-10"></el-input>
                </div>
                <div>
                  <el-button>默认按钮</el-button>
                </div>
                <div>相似度查询</div>
                <div>转发至讨论</div>
            </div>
            <div class='input-container'>
              <el-input v-model="comment1" placeholder="请输入作业评语"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class='comment-container'>
        <div class='smalltitle'>作业批语</div>
        <div class='input-container'>
          <el-input v-model="comment2" placeholder="请输入作业批语"></el-input>
        </div>
      </div>
    </div>
  </div>
  <div class='right'>
    <div class='right-container'>
      <div class='right-head-container'>
        <div class='head'>这里是头像</div>
        <div class='detail-container'>
          <div class='detail-name'>
            大名字
          </div>
          <div class='detail-other'>
            12345678
          </div>
            <div class='detail-other'>
            2018级2班
          </div>
        </div>
      </div>
      <div class="right-bottom-container">
        <div>
          <el-button>1</el-button>
        </div>
        <div>
          <el-button>2</el-button>
        </div>
        <div>
          <el-button>3</el-button>
        </div>
        <div>
          <el-button>4</el-button>
        </div>
        <div>
          <el-button>5</el-button>
        </div>
        <div>
          <el-button>6</el-button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='bottom-bar'>
  <div class='total'>
    总分
    <el-input v-model="total" style='width:80px'></el-input>
    分
  </div>
  <div  class='button-group'>
    <el-row>
      <el-button>打回重做</el-button>
      <el-button type="primary" plain>提交</el-button>
      <el-button type="primary" plain>提交并进入下一题</el-button>
    </el-row>
  </div>
</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
        total:'',
        mark:'',
        comment1:'',
        comment2:'',
			}
		}
	}
</script>

<style scoped  lang="scss">
:body{background: #ddd;}
.main{
  display: flex;
}
.left{
  height: 87vh;
  flex-grow: 2;
  display: flex;
  margin-top: 3vh;
}
.right{
  height: 75vh;
  flex-grow:1;
  display: flex;
  margin-top: 3vh;
}
.left-container{
  margin-left:25%;
  background: #fff;
  width:75%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.right-container{
  background: #fff;
  margin-left: 5%;
  width:75%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.title{
  font-size: 20px;
  padding: 3%;
}
.smalltitle{
  font-size:14px;
  padding: 3%;
}
.description{
  font-size: 12px;
  padding:0 3%;
  color:#606266;
}
.content-container{
  display: flex;
  flex-direction: column;
}
.comment-container{
  display: flex;
  flex-direction: column;
  border-top: 1px solid #606266;
  border-image: linear-gradient( to top,transparent  50%,#ddd 50%) 100% 0 100% 0 ;
}
.doc-container{
  padding: 0 3%;
}
.doc{
  width:50%;
  height:8vh;
  background: #eee;
}
.correct-answer-container{
  padding: 0 1.8% 1.8% 1.8%;
}
.correct-answer{
  width:100%;
  height:16vh;
  background: #eee;
  display: flex;
  flex-direction: column;
}
.correct-answer-head{
  display: flex;
  flex-direction: row;
}
.mark-input-container{
  width: 40px;
  height: 2px;//这里控制不了高度，需要整个el-input改 没时间写了
}
.input-container{
  padding: 0 3%;
}
.right-head-container{
  display: flex;
  flex-direction: row;
  padding: 5%;
  border-bottom: 1px solid #606266;
  border-image: linear-gradient( to bottom,transparent  50%,#ddd 50%) 100% 0 100% 0 ;
}
.head{
  width: 100px;
  height: 100px;
}
.detail-container{
  display: flex;
  flex-direction: column;
}
.detail-name{
  font-size: 14px;
}
.detail-other{
  font-size: 12px;
  color:#606266
}
.right-bottom-container{
  display: grid;
  padding: 2%;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto auto auto auto;
}
.bottom-bar{
  display: flex;
  width: 100%;
  height: 10vh;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  position:absolute;
  bottom:0px;
  left:0px;
  background-color: #fff;
}
.total{
  margin: 2vh;
  flex-grow: 1;
  padding: 0.25vh 10%;
}
.button-group{
  flex-grow: 1;
  margin: 2vh;
  display: flex;
  flex-direction: row-reverse;
  padding-right: 10%;
}
</style>
